<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件定义 example</title>

<style type="text/css">
.divTop {
	border-top: 1px dashed rgb(77, 239, 24);
	width: 80%;
	margin-top: 25px;
}

.divWrap {
	border-bottom: 1px dashed #f512c4;
	width: 60%;
	padding: 10px;
}
</style>

</head>
<body>
	<div style="border-bottom: 1px dashed blue;">
		<h1>vue 组件定义 examples</h1>
	</div>

	<div id="example-1" class = "divTop"  style="">
		<div style="">
			<div>
				<h3>定义全局组件</h3>
			</div>
			<my-component></my-component>
		</div>
		<div class = "divWrap " style=" ">
			<div>
				<h3>定义局部组件</h3>
			</div>
			<part-component></part-component>
		</div>
		<div class = "divWrap " style=" ">
			<div>
				<h3>使用Prop传递数据</h3>
			</div>
			<prop-component message='静态prop'></prop-component>
		</div>
		<div class = "divWrap " style=" ">
			<div>
				<h3>使用动态Prop传递数据</h3>
			</div>
			<div>
				<span>输入：</span>
				<input v-model="parentMsg">
			</div>
			<dynamic-prop-component v-bind:dynamic-message="parentMsg"></dynamic-prop-component>
		</div>
		<div class = "divWrap " style=" ">
			<div>
				<h3>非 Prop 属性</h3>
				<span >组件可以接收任意传入的属性，这些属性都会被添加到组件的根元素上。(不需要事先定义 prop) </span>
			</div>
			<none-prop-component data-3d-date-picker="true" ></none-prop-component>
		</div>
	</div>

	<div style="border-bottom: 1px dashed blue;">
		<h1>自定义事件</h1>

	</div>
	<div id="counter-event-example" class = "divTop" >
		<div class = "divWrap">
			<div>
				<p>使用 v-on 绑定自定义事件</p>
				<p>每个 Vue 实例都实现了事件接口 (Events interface)，即：</p>
				<p>使用 $on(eventName) 监听事件</p>
				<p>使用 $emit(eventName) 触发事件</p>
			</div>
			<div>
				<p>{{ total }}</p>
				<!-- 使用v-on 来绑定事件监听  -->
				<button-counter v-on:increment="incrementTotal"></button-counter>
				<button-counter v-on:increment="incrementTotal"></button-counter>
			</div>
		</div>
		<div class = "divWrap">
			<div>
				<p>使用自定义事件的表单输入组件</p>
				<p> 使用 v-model 来进行数据双向绑定。 </p>
			</div>
			<div>
				<input v-model="price">
 				<currency-input v-model="price"></currency-input>
			</div>
		</div>
	</div>

</body>


<script type="text/javascript" src="js/vue.js"></script>
<script>
	//注册一个全局组件 
	Vue.component('my-component', {
		// 选项
		template : '<div>这是一个全局组件!</div>'
	})
	// 注册一个局部组件 
	var Child = {
		template : '<div>这是一个局部组件!</div>'
	}
	var example1 = new Vue({
		el : '#example-1',
		//绑定的属性
		data : {
			parentMsg:''
		},
		//计算属性
		computed : {

		},
		//
		methods : {

		},
		components : {
			// <my-component> 将只在父模板可用
			'part-component' : Child ,
			//使用prop传递数据的组件
			'prop-component' : {
				  // 声明 props
				  props: ['message'],
				  template :"<span>{{ message }}</span>"
			},
			//使用动态的prop传递数据的组件定义
			'dynamic-prop-component' : {
				  // 声明 props 注意此处要使用大驼峰 
				  props: ['dynamicMessage'],
				  template :" <div> <span>输出：</span> {{ dynamicMessage }}</div>"
			},
			//使用动态的prop传递数据的组件定义
			'none-prop-component' : {
				  // 声明 props 注意此处要使用大驼峰 
				  props: ['dynamicMessage'],
				  template :" <div type='date' class='form-control' > <span>非prop属性合并:  f12 查看 </span> </div>"
			}
		}
	})

	//自定义事件
	var button_counter_controller = new Vue({
		el : '#counter-event-example',
		data : {
			total : 0,
			price : 0
		},
		methods : {
			incrementTotal : function() {
				this.total += 1
			}
		},
	
		components : {
				'button-counter' : {
					// 声明 props
					data : function() {
						return {
							counter : 0
						}
					},
					template :'<button v-on:click="incrementCounter">{{ counter }}</button>',
					methods : {
						incrementCounter : function() {
							this.counter += 1
							this.$emit('increment') 
						}
					}
				},

				'currency-input' : {

						template : '\
					    <span>\
					      $\
					      <input\
					        ref="input"\
					        v-bind:value="value"\
					        v-on:input="updateValue($event.target.value)"\
					      >\
					    </span>\
					  ',
						props : [ 'value' ],
						methods : {
							// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
							updateValue : function(value) {
								var formattedValue = value
										// 删除两侧的空格符
										.trim()
										// 保留 2 小数位
										.slice(
												0,
												value.indexOf('.') === -1 ? value.length
														: value.indexOf('.') + 3)
								// 如果值不统一，手动覆盖以保持一致
								if (formattedValue !== value) {
									this.$refs.input.value = formattedValue
								}
								// 通过 input 事件发出数值
								this.$emit('input', Number(formattedValue))
							}
						}
					}
				}
			})
</script>


<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

</html>


